<!-- eslint-disable -->
<template>
  <view
    v-html="videoHtml"
    id="dom-video"
    class="dom-video"
    :eventDrive="eventDrive"
    :change:eventDrive="domVideo.eventHandle"
    :videoSrc="videoSrc"
    :change:videoSrc="domVideo.srcChange"
    :videoProps="videoProps"
    :change:videoProps="domVideo.propsChange"
    :randomNum="randomNum"
    :change:randomNum="domVideo.randomNumChange" />
</template>
<script>
// 供App使用
export default {
  props: {
    src: {
      type: String,
      default: "",
    },
    autoplay: {
      type: Boolean,
      default: true,
    },
    // 封面
    poster: {
      type: String,
      default: "/static/public/video/play.png",
    },
    loop: {
      type: Boolean,
      default: false,
    },
    controls: {
      type: Boolean,
      default: true,
    },
    objectFit: {
      type: String,
      default: "contain", //contain 包含 fill 填充 cover 覆盖
    },
    muted: {
      type: Boolean,
      default: true,
    },
    // 是否播放，控制自动暂停或播放的
    isPlay: {
      type: Boolean,
      default: true,
    },
    // 视频宽度
    width: {
      type: String,
      default: "100%",
    },
    // 视频高度
    height: {
      type: String,
      default: "748rpx",
    },
  },

  // 数据状态
  data() {
    return {
      videoHtml: "",
      videoSrc: "",
      eventDrive: null,
      videoProps: {},
      randomNum: Math.floor(Math.random() * 100000000 + 1),
    };
  },
  watch: {
    // 监听视频资源文件更新
    src: {
      handler(val) {
        if (!val) return;
        this.initVideoHtml();
        setTimeout(() => {
          this.videoSrc = val;
        }, 0);
      },
      immediate: true,
    },
    // 监听首次加载
    autoplay: {
      handler(val) {
        this.videoProps.autoplay = val;
      },
      immediate: true,
    },
    isPlay(val, oldVal) {
      if (val == true) {
        this.eventDrive = "play";
      } else {
        this.eventDrive = "pause";
      }
    },
  },
  // 生命周期
  mounted() {
    this.initVideoHtml();
  },

  // 方法
  methods: {
    // 将video的事件传递给父组件
    videoEvent(data) {
      // console.log('向父组件传递事件 =>', data)
      this.$emit(data);
    },
    // 初始化视频
    initVideoHtml() {
      this.videoHtml = `<video
          src="${this.src}"
          id="dom-html-video_${this.randomNum}"
          class="dom-html-video"
          ${this.autoplay ? "autoplay" : ""}
          ${this.loop ? "loop" : ""}
          ${this.controls ? "controls" : ""}
          ${this.muted ? "muted" : ""}
          ${this.poster ? 'poster="' + this.poster + '"' : ""}
          preload="auto"
          playsinline
          webkit-playsinline
          width="${this.width}"
          height="${this.height}"
          style="object-fit: ${this.objectFit};padding:0;"
           controlslist="nodownload noremoteplayback noplaybackrate"
        >
          <source src="${this.src}" type="video/mp4">
          <source src="${this.src}" type="video/ogg">
          <source src="${this.src}" type="video/webm">
        </video>
      `;
      // console.log('视频html =>', this.videoHtml)
    },
    resetEventDrive() {
      this.eventDrive = null;
    },
    // 将service层的事件/数据 => 传递给renderjs层
    play() {
      this.eventDrive = "play";
    },
    pause() {
      this.eventDrive = "pause";
    },
    stop() {
      this.eventDrive = "stop";
    },
    fullscreen() {
      this.eventDrive = "fullscreen";
    },
  },
};
</script>

<script module="domVideo" lang="renderjs">
export default {
  data() {
    return {
      video: null,
      num: '',
      options: {}
    }
  },
  mounted() {
    this.initVideoEvent()
  },
  methods: {
    initVideoEvent() {
      setTimeout(() => {
        let video = document.getElementById(`dom-html-video_${this.num}`)
        this.video = video

        // 监听视频事件
        video.addEventListener('play', () => {
          this.$ownerInstance.callMethod('videoEvent', 'play')
        })
        video.addEventListener('pause', () => {
          this.$ownerInstance.callMethod('videoEvent', 'pause')
        })
        video.addEventListener('ended', () => {
          this.$ownerInstance.callMethod('videoEvent', 'ended')
          this.$ownerInstance.callMethod('resetEventDrive')
        })
      }, 100)
    },
    eventHandle(eventType) {
      if (eventType) {
        this.video = document.getElementById(`dom-html-video_${this.num}`)

        if (eventType === 'play') {
          this.video.play()
        } else if (eventType === 'pause') {
          this.video.pause()
        } else if (eventType === 'stop') {
          this.video.stop()
        } else if (eventType === 'fullscreen') {
          this.video.fullscreen()
        }
      }
    },
    srcChange(val) {
      // 实现视频的第一帧作为封面，避免视频展示黑屏
      this.initVideoEvent()
      setTimeout(() => {
        let video = document.getElementById(`dom-html-video_${this.num}`)

        video.addEventListener('loadedmetadata', () => {
          let { autoplay } = this.options
          video.play()
          if (!autoplay) {
            video.pause()
          }
        })
      }, 0)
    },
    propsChange(obj) {
      this.options = obj
    },
    randomNumChange(val) {
      this.num = val
    },
  }
}
</script>

<style lang="scss" scoped>
.dom-video {
  overflow: hidden;
  height: 100%;
  padding: 0;
  background-color: #000000;
  &-height {
    height: 100%;
  }
}
</style>
